<template>
    <div>
      <div id="chart" style="width: 483px; height: 300px;"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    data() {
      return {
        chartData: {
          paid: { A: 0, B: 0, C: 0, D: 0 },
          allocated: { A: 0, B: 0, C: 0, D: 0 },
          parks: { A: 0, B: 0, C: 0, D: 0 }
        }
      };
    },
    methods: {
      // 获取已缴费数据
      async getPaid(parkname) {
        try {
          const { data: res } = await this.axios.get(
            `parking/getParkOrder?parkname=${parkname}&orderstatus=1&currPage=0&pageNum=4`
          );
          this.chartData.paid[parkname] = res.total;
        } catch (error) {
          console.error(error);
          this.$message.error("请求失败: " + error.message);
        }
      },
  
      // 获取已分配量数据
      async getAllocated(parkname) {
        try {
          const { data: res } = await this.axios.get(
            `parking/getParkData?parkname=${parkname}&parkstatus=1&currPage=0&pageNum=4`
          );
          this.chartData.allocated[parkname] = res.total;
        } catch (error) {
          console.error(error);
          this.$message.error("请求失败: " + error.message);
        }
      },
  
      // 获取车位数数据
      async getParks(parkname) {
        try {
          const { data: res } = await this.axios.get(
            `parking/getParkData?parkname=${parkname}&currPage=0&pageNum=4`
          );
          this.chartData.parks[parkname] = res.total;
        } catch (error) {
          console.error(error);
          this.$message.error("请求失败: " + error.message);
        }
      },
  
      // 执行所有请求
      async fetchData() {
        const parknames = ['A', 'B', 'C', 'D'];
        for (const parkname of parknames) {
          await this.getPaid(parkname);
          await this.getAllocated(parkname);
          await this.getParks(parkname);
        }
        this.updateChart();
      },
  
      // 更新图表
      updateChart() {
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '车位数/已分配量/已缴费',
            left: 'left' 
          },
          tooltip: {},
          legend: {
            data: ['车位数', '已分配量', '已缴费'],
            top: '0',
            right: '0'
          },
          xAxis: {
            type: 'category',
            data: ['A区车位', 'B区车位', 'C区车位', 'D区车位'],
            axisLine: { // 显示 x 轴的实线
              show: true,
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: { // 避免 x 轴标签重叠
              interval: 0,
              rotate: 0 // 不倾斜
            }
          },
          yAxis: {
            type: 'value',
            axisLine: { // 显示 y 轴的实线
              show: true,
              lineStyle: {
                color: '#000'
              }
            }
          },
          series: [
            {
              name: '车位数',
              type: 'bar',
              data: Object.values(this.chartData.parks),
              label: { // 在柱状图上方显示数字
                show: true,
                position: 'top'
              }
            },
            {
              name: '已分配量',
              type: 'bar',
              data: Object.values(this.chartData.allocated),
              label: { // 在柱状图上方显示数字
                show: true,
                position: 'top'
              }
            },
            {
              name: '已缴费',
              type: 'bar',
              data: Object.values(this.chartData.paid),
              label: { // 在柱状图上方显示数字
                show: true,
                position: 'top'
              }
            }
          ]
        };
  
        myChart.setOption(option);
      }
    },
    mounted() {
      this.fetchData();
    }
  };
  </script>
  
  <style>
  /* 您可以在这里添加样式 */
  </style>